<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/jquery-ui-1.8.21.custom.css">
<link rel="stylesheet" href="resources/css/cbnuselect.css">
<script src="resources/js/jquery-1.7.2.min.js"></script>
<script src="resources/js/jquery-ui-1.8.21.custom.min.js"></script>
</head>
<body>
<div id="imageView" class="ui-corner-all ui-helper-clearfix">
	<div id="name" class="ui-widget-header ui-corner-all">cbnu1</div>

	<div id="view">
		<img src="resources/img/cbnu1.gif">
	</div>
	<div id="image">
		<img id="cbnu1" src="resources/img/cbnu1.gif" class="ui-selected">
		<img id="cbnu2" src="resources/img/cbnu2.gif" class="right">
		<img id="cbnu3" src="resources/img/cbnu3.gif">
		<img id="cbnu4" src="resources/img/cbnu4.gif" class="right">
		<img id="cbnu5" src="resources/img/cbnu5.gif">
		<img id="cbnu6" src="resources/img/cbnu6.gif" class="right">
		<img id="cbnu7" src="resources/img/cbnu7.gif">
		<img id="cbnu8" src="resources/img/cbnu8.gif" class="right">
	</div>
</div>


<script type="text/javascript">
			$(function(){


				var selectOption = {
					stop: function(e, ui) {			
						$("#imageView").children().not("#image").remove();	
						
						$("<div />", {													
							id: "view"
						}).insertBefore("#image");

						if ($(".ui-selected", "#image").length == 1) {			
							select1();				
						} else {
							select2();				
						}
					}
				};

				function select1(){									
					var ID = $(".ui-selected", "#image").attr("id");

					$("<div />", {															
						id: "name",
						text: ID,
						class: "ui-widget-header ui-corner-all"
					}).insertBefore("#view");

					$("<img />", {																			
						src: "resources/img/" + ID + ".gif"
					}).appendTo("#view");					
				}

				function select2() {									
					$("<div />", {												
						id: "tabs"  
					}).insertBefore("#view");

					var tabList = $("<ul />", {								
						id: "tabList"
					}).appendTo("#tabs");

					$(".ui-selected", "#image").each(function() {				
						var ID = $(this).attr("id"),										
							tabLI = $("<li />").appendTo(tabList),						
							tabA = $("<a />", {														
								text: ID,																	
								href: "#" + ID												
							}).appendTo(tabLI),
							tabPanel = $("<div />", {
								id:ID
							}).appendTo("#view");		

						$("<img />", {									
							src: "resources/img/" + ID + ".gif"
						}).appendTo(tabPanel);
					});

					$("#view").css("left", 0).appendTo("#tabs");				
					$("#tabs").tabs();	
				}

				//		--탭의 기본구성-
				//		<div id="tabs"> 
				//			<ul id="tabList">
				//				<li> <a href="#ID">ID</a> </li>	
				//			</ul>
				//			<div id="ID"><img></div>
				//		</div> 


				$("#image").selectable(selectOption);


			});		
		</script>
</body>
</html>